<template>
  <div>
    <a-table :columns="columns" :data-source="data">
      <a slot="name" slot-scope="text">{{ text }}</a>
    </a-table>
    <div class="top">
      <div>
        应付金额：
        <a-input placeholder="¥0.00" />
      </div>
      <div style="margin-left: 35px">
        经办人：
        <a-input placeholder="尹建雪" />
      </div>
      <div style="margin-left: 71px">
        处理时间：
        <a-input placeholder="2021.12.12" />
      </div>
    </div>
    <div class="bottom">
      备注：
      <a-input placeholder="备注" />
      <a-button style="margin-left: 203px" type="primary">确定</a-button>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: "商品编号",
    dataIndex: "number",
    key: "number",
    scopedSlots: { customRender: "number" }
  },
  {
    title: "商品名称",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "单价",
    dataIndex: "price",
    key: "price",
    ellipsis: true
  },
  {
    title: "销售数量",
    dataIndex: "total",
    key: "total",
    ellipsis: true
  },
  {
    title: "作者",
    dataIndex: "writer",
    key: "writer",
    ellipsis: true
  },
  {
    title: "出版商",
    dataIndex: "press",
    key: "press",
    ellipsis: true
  },
  {
    title: "处理时间",
    dataIndex: "processing",
    key: "processing",
    ellipsis: true
  },
  {
    title: "总金额",
    dataIndex: "money",
    key: "money",
    ellipsis: true
  }
];

const data = [
  {
    key: "1",
    number: "商品编号",
    name: "xxxx",
    price: "xxxx",
    sales: "xx",
    author: "xxx",
    publisher: "xxx",
    processing: "xxxx",
    total: "xxx",
    tags: ["nice", "developer"]
  },
  {
    key: "2",
    number: "商品编号",
    name: "xxxx",
    price: "xxxx",
    sales: "xx",
    author: "xxx",
    publisher: "xxx",
    processing: "xxxx",
    total: "xxx",
    tags: ["nice", "developer"]
  },
  {
    key: "3",
    number: "商品编号",
    name: "xxxx",
    price: "xxxx",
    sales: "xx",
    author: "xxx",
    publisher: "xxx",
    processing: "xxxx",
    total: "xxx",
    tags: ["nice", "developer"]
  },
  {
    key: "4",
    number: "商品编号",
    name: "xxxx",
    price: "xxxx",
    sales: "xx",
    author: "xxx",
    publisher: "xxx",
    processing: "xxxx",
    total: "xxx",
    tags: ["nice", "developer"]
  },
  {
    key: "5",
    number: "商品编号",
    name: "xxxx",
    price: "xxxx",
    sales: "xx",
    author: "xxx",
    publisher: "xxx",
    processing: "xxxx",
    total: "xxx",
    tags: ["nice", "developer"]
  },
  {
    key: "6",
    number: "商品编号",
    name: "xxxx",
    price: "xxxx",
    sales: "xx",
    author: "xxx",
    publisher: "xxx",
    processing: "xxxx",
    total: "xxx",
    tags: ["nice", "developer"]
  },
  {
    key: "7",
    number: "商品编号",
    name: "xxxx",
    price: "xxxx",
    sales: "xx",
    author: "xxx",
    publisher: "xxx",
    processing: "xxxx",
    total: "xxx",
    tags: ["nice", "developer"]
  },
  {
    key: "8",
    number: "商品编号",
    name: "xxxx",
    price: "xxxx",
    sales: "xx",
    author: "xxx",
    publisher: "xxx",
    processing: "xxxx",
    total: "xxx",
    tags: ["nice", "developer"]
  }
];

import { listgoods } from "@/api/data";
export default {
  data() {
    return {
      data,
      columns,
      count: 0,
      params: {
        page: 1,
        perPage: 20
      }
    };
  },
  mounted() {
    this.getListgoods();
  },
  methods: {
    async getListgoods() {
      const data = await listgoods(this.params);
      const { count, list } = data;
      this.list = list || [];
      this.pagination = Object.assign({}, this.pagination, { total: count });
      this.data = list;
      console.log(this.data);
    }
  }
};
</script>

<style scoped>
.top {
  display: flex;
}

.top input {
  width: 140px;
  height: 32px;
  margin-left: 4px;
}
.bottom {
  margin-top: 27px;
  display: flex;
}
.bottom input {
  width: 712px;
  height: 32px;
  margin-left: 5px;
}
</style>
